/*
 * @Author: suxingle suesle2022@163.com
 * @Date: 2022-07-30 14:03:48
 * @LastEditors: suxingle suesle2022@163.com
 * @LastEditTime: 2022-07-31 23:40:57
 * @FilePath: \myassessment\src\list\nav.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import "./index.css"
import "../../src/assets/reset.css"    
import search from "../../src/assets/search.svg";
import message from "../../src/assets/message.svg";
import React, {useState,useEffect,Pagination} from 'react';
import axios from "axios";
import {HashRouter as Router} from 'react-router-dom';

const List = () => {
  const [videoList, setVideoList] = useState([]);
  const getVideoList = async () => {
    const { data } = await axios({
      url: "https://www.fastmock.site/mock/cac0d1825d5a949eda9703bd1f4e3f13/test/test",  
      method: "get",
    });
    console.log("data.data :>> ", data.data);
    setVideoList(data.data);
  };
  useEffect(() => {
    getVideoList();
  }, []);
  
  return (
   <div className="List">
        <div className="ListHead">
          <div className='nav'>
            <div className='logo'>
              <img style={{ width: "100%", height: "24px" }} src={require("../../src/assets/logo1.png")}></img>
            </div>
            <ul className='navlist'>
              <li>应用市场</li>
              <li>开发者 <span><img style={{ width: "12px", heigrt: "12px" }} src={require("../../src/assets/down@2x.png")} /></span></li>
              <li>社区合作伙伴  <span><img style={{ width: "12px", heigrt: "12px" }} src={require("../../src/assets/down@2x.png")} /></span></li>
              <li>支持与服务  <span><img style={{ width: "12px", heigrt: "12px" }} src={require("../../src/assets/down@2x.png")} /></span></li>
              <li>运营与管理  <span><img style={{ width: "12px", heigrt: "12px" }} src={require("../../src/assets/down@2x.png")} /></span></li>
            </ul>
            <ul className='navright'>
              <li><img src={search} /></li>
              <li className='message'><img src={message} />
                <span>99+</span>
              </li>
              <li>控制台</li>
              <li><img style={{ width: "30px", height: "30px" }} src={require("../../src/assets/头像@2x.png")} /></li>
              <li>momo.zxy  <span><img style={{ width: "12px", heigrt: "12px" }} src={require("../../src/assets/down@2x.png")} /></span></li>
            </ul>
          </div>
          {/* search */}
          <div className='searchModular' >
            <div style={{ height: "32px", fontSize: "32px", lineHeight: "32px" }}>视频中心</div>
            <div style={{ height: "28px", margin: "16px 0 24px 0", fontSize: "14px" }}>帮您快速了解汉得产品，助力交付使用全流程</div>
            <div className="searchKeyword" style={{ height: "40px", width: '743px' }}>
              <input type="text" placeholder="请搜索类别/视频名称"></input>
              <button>搜索</button>
            </div>
          </div>
        </div>
        
        <div className="content">
          <ul className="siderNav">
              <li>全部产品</li>
              <li>飞搭Feida</li>
              <li>汉得协同制造软件</li>
              <li>汉德智能合同管理软件</li>
              <li>虹珊瑚(Corallium)</li>
              <li>汉得运输管理软件</li>
              <li>汉得智慧财务套件系统</li>
              <li>汉得运输管理软件</li>
              <li>汉得清分结算软件</li>
              <li>海马汇HIPPIUS</li>
            </ul>
            <div className="contextBox">
              <div className="contextnavHead">
                <div>视频分类</div>
              <ul className="contextnav">
                <li>全部分类</li>
                <li>开放平台</li>
                <li>项目管理</li>
                <li>开发者</li>
                <li>猪齿鱼</li>
                <li>海马汇</li>
              </ul>
              </div>
              
              <div className="contextlistHead">
                <ul className="contextlist" >
                  {videoList.map((item) => {
                    return (
                      
                          <li key={item.id}>
                              <div>
                                <img src={require("../../src/assets/picture.jpg")} />
                              </div>
                              <div>{item.title}</div>
                              <div>{item.details}</div>
                              <div>
                                <div className="left">286次播放</div>
                                <div className="right">12节</div>
                              </div>
                          </li>
                    );
                  })}
                  </ul>
              </div>
            </div>
        </div>
        
    </div>
  )
};

export default List;